<template>
  <div class="data-center">
    <Row class="title-top mb-20">
      <span>数据中心</span>
      <span class="edit ml-10" v-if="!showEmpty" @click="showModal">点此编辑</span>
    </Row>
    <Row v-if="!showEmpty">
      <Table :columns="columns" :loading="loading" size="small" :data="tableData" border>
        <template slot-scope="{ row }" slot="name">
          <span>{{ row.displayName }}</span>
        </template>
        <template slot-scope="{ row }" slot="send">
          <Icon v-if="row.allowEtlTransport" type="md-checkmark" size="30" color="#4481F1" />
          <Icon v-else type="md-remove" size="30" color="#979EAD" />
        </template>
        <template slot-scope="{ row }" slot="update">
          <!--函数式组件(vue2.5及以上版本),没有响应式数据)，无实例 (没有 this 上下文) -->
          <BaseTd :render="renderFunc" :isTrue="row.allowEtlModify"></BaseTd>
        </template>
        <template slot-scope="{ row }" slot="delete">
          <BaseTd :render="renderFunc" :isTrue="row.allowEtlPreDelete"></BaseTd>
        </template>
      </Table>
    </Row>
    <EditDataCenter v-model="showEditModal" @refresh="refresh" :model="tableData" />
  </div>
</template>
<script lang="tsx">
import { Component, Vue, Prop } from "vue-property-decorator";
import { Tools } from "@/model/tools.ts";
import { queryETLConfigType } from "@/api/service";
import BaseTd from "@components/iv-render/BaseTd.ts";
import EditDataCenter from "@views/EditDataCenter.vue";
import { centerColumns } from "@/data/columns.js";

@Component({
  components: {
    BaseTd,
    EditDataCenter
  }
})
export default class DataCenter extends Tools {
  private tableData: Array<any> = [];
  private loading: boolean = true;
  private showEditModal: boolean = false; //点击编辑
  private trasportOn: boolean = true; // 开启
  private queryListParams: Array<any> = [];
  /**
   * 表格名
   */
  private get columns() {
    return centerColumns;
  }

  private get showEmpty() {
    return !this.tableData.length || !this.trasportOn;
  }

  /**
   * 关闭重新刷新数据
   */
  private refresh() {
    this.getETLConfigType();
    this.showEditModal = false;
  }

  private showModal() {
    this.showEditModal = true;
  }

  /**
   * jsx函数式组件渲染
   */
  private renderFunc(h, isTrue) {
    return isTrue ? (
      // 使用渲染到页面的标签,Icon提示无法识别
      <icon type="md-checkmark" size="30" color="#4481F1" />
    ) : (
      <icon type="md-remove" size="30" color="#979EAD" />
    );
  }
  private async getETLConfigType() {
    const [err, data] = await queryETLConfigType(this.queryListParams);
    this.loading = false;
    if (err) {
      let msg = err.message || "获取ETC数据信息异常";
      this.$Message.error(msg);
      return;
    }
    if (!data) return;
    this.tableData = data;
  }

  mounted() {
    this.getETLConfigType();
  }
}
</script>
<style lang="stylus" scoped>
.data-center {
  .title-top {
    box-sizing: border-box
    font-size: 16px
    color: $base-color
    font-weight: 600
  }
  .edit {
    font-size: 12px
    font-weight: 400
    color: #2d8cf0
    cursor: pointer
  }
}
</style>
